<!-- 添加商品 -->
<template>
  <div>
    <el-dialog class="contain" :visible="addVisible" @close="closeDialog" top="13%">
      <span slot="title">
        <p class="title_p">选择商品</p>
        <el-divider />
      </span>
      <div class="bottom">
        <!-- 搜索框 -->
        <search-box class="bottom_search" placeholderInput="请输入关键词进行搜索" :tableDataInput="tableData"
          @search="handleSearch" placeholder="请输入关键字进行搜索"></search-box>
        <!-- 商品列表 -->
        <div class="comArrayDiv">
          <template>
            <el-table :data="selectedItems" @selection-change="checkBox">
              <el-table-column type="selection" width="50px" />
              <el-table-column prop="pic" label="商品图片" width="80px">
                <template #default="scope">
                  <el-image style="width: 35px; height: 35px; border-radius: 5px;" :src="scope.row.image"></el-image>
                </template>
              </el-table-column>
              <el-table-column prop="commodityName" label="商品名称" :show-overflow-tooltip="true" width="160">
              </el-table-column>
              <el-table-column prop="productCategoryId" label="商品分类" align="center" />
              <el-table-column prop="brandName" label="商品品牌" align="center" />
              <el-table-column prop="productSn" label="货号" align="center" />
            </el-table>
          </template>
        </div>
        <!-- 操作按钮 -->
      </div>
      <div class="control">
        <el-pagination background layout="->,prev, pager,next" :page-size="5" :total="tableDataLength"
          @current-change="handleCurrentChange" style="margin-top: 5px;">
        </el-pagination>
        <div class="control_button">
          <el-button style="border: 1px solid black;" @click="addVisible = false">取消</el-button>
          <el-button type="primary" @click="next">下一步</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog class="flash" title="设置秒杀商品" :visible.sync="setComVisible" top="10%" width="76.3%">
      <div class="flex_container">
        <div class="flashDiv" v-for="(item, index) in comArrays" :key="index">
          <el-tag class="flashDiv_name" closable>
            {{ item.name }}
          </el-tag>
          <el-table :data="item.receiptData" border style="width: 100%">
            <el-table-column prop="color" label="机身颜色" width="100"></el-table-column>
            <el-table-column prop="capacity" label="存储容量" width="100"></el-table-column>
            <el-table-column prop="type" label="网络类型" width="100"></el-table-column>
            <el-table-column prop="size" label="屏幕尺寸" width="100"></el-table-column>
            <el-table-column prop="count" label="库存数量" width="80"></el-table-column>
            <el-table-column prop="price" label="零售价" width="80">
            </el-table-column>
            <el-table-column prop="number" label="秒杀价" width="140">
              <el-input />
            </el-table-column>
            <el-table-column prop="flashCount" label="秒杀数量" width="140">
              <el-input />
            </el-table-column>
            <el-table-column prop="limitCount" label="限购数量" width="140">
              <el-input />
            </el-table-column>
          </el-table>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
          <el-button style="border: 1px solid black;" @click="setComVisible = close">取消</el-button>
          <el-button type="primary" @click="setComVisible = close">确认</el-button>
        </span>
    </el-dialog>
  </div>
</template>
<script>
import { getAllProducts } from '@/api/api.js'
export default {
  name: "AddCom",
  props: {
    addVisible: {
      type: Boolean,
      default: false
    },
    rowData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      tableData: [],
      selectedItems: [],
      setComVisible: false,
      comArrays: [{
        name: '华为Pura 70 Ultra',
        receiptData: [
          {
            color: '黑色',
            capacity: '128G',
            type: '4G',
            size: '6.8',
            count: '',
            price: '',
          },{}
        ]
      },
      {
        name: '华为Pura 70 Ultra',
        receiptData: [
          {
            color: '黑色',
            capacity: '128G',
            type: '4G',
            size: '6.8',
            count: '',
            price: '',
          },{}
        ]
      },
      ]
    }
  },
  async created() {
    await this.getAllProductsList(1)
    this.currentpageNumber = 1
  },
  methods: {
    closeDialog() {
      // 触发一个名为 'update-visible' 的事件，并传递新值  
      this.$emit('update-visible', false);
      this.$emit('getclose', false);
      this.$emit('dialogclose',false)
    },
    handleSearch(filtered) {
      this.selectedItems = filtered;
    },
    async getAllProductsList(pageNo) {
      try {
        const res = await getAllProducts(pageNo)
        if (res.data.code == 200) {
          this.selectedItems = res.data.result.records;
          this.tableData = res.data.result.records;
          this.tableDataLength = res.data.result.total;
        }
      } catch (error) {
        console.log(error)
      }
    },
    handleCurrentChange(val) {
      this.getAllProductsList(val)
      this.currentpageNumber = val
    },
    checkBox(selection) {
      if (selection.length >= 1) {
        this.deleteListButton = true
        this.deleteListLength = selection.length
      } else
        this.deleteListButton = false
    },
    deleteList() {
      this.$message({
        message: '点击批量删除',
        type: 'warning'
      })
    },
    next() {
      this.closeDialog();
      this.setComVisible = true;
    }
  }
}

</script>
<style scoped>
.el-dialog__wrapper>>>.el-dialog {
  width: 700px;
  min-width: 200px;
  min-height: 550px;
  border-radius: 0;
}

.contain>>>.el-dialog__header {
  padding: 2.5% 0 0 0;
}

.contain>>>.el-dialog__body {
  padding: 0;
}

.title_p {
  font-size: 14px;
  font-weight: 450;
  margin-left: 0.5%;
}

.el-divider--horizontal {
  height: 0px;
  border: 1px solid rgba(235, 238, 242, 1);
  margin: 1.3% 0;
}

.bottom {
  height: 100%;
  width: 100%;
  /* background-color: aqua; */
}

.bottom_search {
  width: 50%;
  height: 28px;
  margin-left: 0.5%;
  margin-top: 1%;
}

.bottom_search>>>.el-input__inner:hover {
  width: 100%;
  height: 28px;
  opacity: 1;
  border-radius: 5px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(211, 218, 230, 1);
  cursor: pointer;
  font-size: 12px;
}

.bottom_search>>>.el-input__inner {
  width: 100%;
  height: 28px;
  border-radius: 5px;
  background-color: white;
  font-size: 12px;
}

.bottom_search>>>.el-input__icon {
  line-height: 28px;
}

.comArrayDiv {
  height: 330px;
  margin-top: 25px;
  display: flex;
  /* 设置为 flex 容器 */
  flex-direction: column;
  /* 默认情况下是列方向，但为了明确性可以指定 */
  justify-content: flex-end;
  /* 子项在交叉轴（这里是垂直方向）的末尾对齐 */
  align-items: flex-end;
  /* 子项在主轴（这里是水平方向）的末尾对齐 */
  position: relative;
  /* 或 absolute/fixed，取决于你的布局需求 */
}

.comArrayDiv::after {
  content: "";
  /* 伪元素默认是空的，这里提供一个空字符串以避免某些浏览器的默认行为 */
  position: absolute;
  top: 99%;
  /* 向上移动以覆盖.comArrayDiv的一部分 */
  left: 0;
  right: 0;
  /* 根据需要调整宽度 */
  height: 5px;
  /* 伪元素的高度 */
  background-color: white;
  /* 半透明的蓝色背景 */
  z-index: 1;
  /* 确保伪元素在.comArrayDiv的内容之上 */
  /* ... 其他样式，如边框、圆角等 ... */
}

.comArrayDiv>>>.el-table td {
  height: 30px;
  width: 100%;
  font-size: 16px;
  padding: 5px 0;
  /* background-color: aqua; */
  border-bottom: none;
  /* margin: 0; */
}

.control {
  height: 100px;
  display: flex;
  /* 设置为 flex 容器 */
  flex-direction: column;
  /* 默认情况下是列方向，但为了明确性可以指定 */
  /* justify-content: flex-end; */
  /* 子项在交叉轴（这里是垂直方向）的末尾对齐 */
  align-items: flex-end;
}

.control_button {
  margin: 2% 1%;
}

.el-button {
  width: 100px;
  height: 40px;
}

.flash>>>.el-dialog {
  height: 75%;
}

/* .flex_container {
  display: flex;
  flex-direction: column;

} */

.flash>>>.el-dialog__body {
  height: 80%;
  /* background-color: blue; */
}

.flashDiv>>>.el-table .el-table__cell {
  padding: 2px;
  color: rgb(93, 89, 89);

  /* border: 1px solid rgb(93, 89, 89); */
}

.flashDiv {
  margin-bottom: 30px;
  /* background-color: aqua; */
}

.flash_button {
  display: flex;
  /* 设置为 flex 容器 */
  /* flex-direction: column;
  /* 默认情况下是列方向，但为了明确性可以指定 */
  justify-content: flex-end;
  /* 子项在交叉轴（这里是垂直方向）的末尾对齐 */
  align-items: flex-end;
}

.flashDiv>>>.el-input__inner {
  height: 25px;
  /* background-color: aquamarine; */
}
</style>